<template>
    <div class="main-menu">
        <span v-for="(item,i) in list" :key="i" @click="$emit('item-click',item)">{{ item.name }}</span>
    </div>
</template>

<script>

export default {
    props:['list'],
    data:function(){
        return {

        }
    },
    methods:{
        
    }
}
</script>


<style scoped>
    .main-menu{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        height: 27px;
        line-height: 27px;
        background-color: rgb(250,250,250);
        border-bottom: 1px solid rgb(240, 240, 240);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .main-menu span{
        font-size: 12px;
        padding: 0 7px;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
    }
    .main-menu span:hover{
        background-color: rgb(240, 240, 240);
    }
</style>